<template>
  <div class="flex flex-col h-full">
    <a-card class="flex-1">
      <div class="flex justify-between">
        <div style="width: 72%">
          <div class="flex justify-between mb-2">
            <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '70px' } }">
              <a-form-item name="bh" class="w-72 mb-0">
                <a-input v-model:value="formState.bh" placeholder="项目类别编号/项目类别名称/助记码" allow-clear @press-enter="getData()" @blur="getData()" />
              </a-form-item>
              <a-form-item name="status" class="w-72 mb-0 ml-8">
                <a-radio-group v-model:value="formState.status" @change="getData()">
                  <a-radio value="">全部</a-radio>
                  <a-radio value="0">未对照</a-radio>
                  <a-radio value="1">已对照</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
            <div class="flex justify-between">
              <BaseExport type="医保" name="项目类别对照" code="000782" :search-params="formState">导出</BaseExport>
              <a-button class="ml-2" @click="handleReset">重置</a-button>
              <a-button class="ml-2 mr-2" type="primary" @click="getData()">搜索</a-button>
              <a-button type="primary" @click="autoCompare">自动对照</a-button>
            </div>
          </div>
          <BaseTable
            column-code="000782"
            fill
            :data-source="tableData"
            :loading="loading"
            bordered
            :custom-row="(record) => ({ onClick: () => onSelectRow(record) })"
            :row-class-name="(record) => (record.bh === selectLeftRow.bh ? 'selected-row' : '')"
            :pagination="pagination"
          >
            <template #bodyCell="{ column, index, record }">
              <template v-if="column.dataIndex === 'xh'">
                {{ index + 1 }}
              </template>
              <template v-if="column.dataIndex === 'status'">
                <a-tag v-if="record.status === '0'" color="blue">未对照</a-tag>
                <a-tag v-if="record.status === '1'" color="green">已对照</a-tag>
              </template>
              <template v-if="column.dataIndex === 'action'">
                <BaseButton confirm-text="确认撤销?" type="link" danger size="small" :disabled="record.status === '0'" @click="cancelCompare(record)">
                  撤销
                </BaseButton>
              </template>
            </template>
          </BaseTable>
          <div class="flex justify-between">
            <p :class="[tableData.length > 0 ? 'py-0 my-0 ant-tag-red font-bold -mt-8 ' : 'py-0 my-0 ant-tag-red font-bold mt-4']">
              未对照数量：{{ unCompareNum }}个
            </p>
            <!-- <a-button type="primary" @click="saveCompare(false)">对照</a-button> -->
          </div>
        </div>
        <div style="width: 26%">
          <a-input
            v-model:value="formState.zjm"
            placeholder="项目类别编码/项目类别名称"
            class="mb-2"
            allow-clear
            @press-enter="getMedTypeList()"
            @blur="getMedTypeList()"
          />
          <BaseTable column-code="000783" fill :loading="loading1" :data-source="departData" bordered :pagination="pagination1">
            <template #bodyCell="{ column, index, record }">
              <template v-if="column.dataIndex === 'xh'">
                {{ index + 1 }}
              </template>
              <template v-if="column.dataIndex === 'action'">
                <a-button type="link" size="small" @click="saveCompare(false, record)">对照</a-button>
              </template>
            </template>
          </BaseTable>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import BaseTable from '@/components/BaseTable'
import { post } from '@/utils/request'

const formRef = ref(null)
const formState = ref({ status: '' })
const selectLeftRow = ref({})
const unCompareNum = ref(0)
const { loading, tableData, getData, pagination } = useTable({
  url: '/insure/getXmlbInsure',
  immediate: true,
  formatParams: () => {
    return {
      bh: formState.value.bh,
      status: formState.value.status
    }
  }
})

const getUnDataNum = async () => {
  const { code, data } = await post('/insure/getXmlbInsureCount')
  if (code === 0) {
    unCompareNum.value = data
  }
}
const {
  loading: loading1,
  tableData: departData,
  getData: getMedTypeList,
  pagination: pagination1
} = useTable({
  url: '/operation/opex/getDictCommonItemList',
  immediate: true,
  formatParams: () => {
    return {
      dictCommonCode: 'med_chrgitm_type',
      zjm: formState.value.zjm,
      status: 1
    }
  }
})
const onSelectRow = (select) => {
  selectLeftRow.value = select
  formState.value.zjm = select.mc
  getMedTypeList()
  //选择科室
  // if (type === 1) {
  //   selectLeftRow.value = select
  //   formState.value.zjm = select.mc
  //   getMedTypeList()
  // } else {
  //   //选择国家医保科室
  //   selectRightRow.value = select
  //   selectLeftRow.value.nmiCode = select.dictItemCode
  //   selectLeftRow.value.dictItemName = select.dictItemName
  // }
}
const saveCompare = async (flag, row) => {
  if (flag) selectLeftRow.value = row
  const { code, msg } = await post('/insure/saveXmlbInsure', {
    bh: selectLeftRow.value.bh,
    nmiCode: row.dictItemCode
  })
  if (code !== 0) return message.error(msg || '对照失败')
  message.success(msg || '对照成功')
  getData()
  getUnDataNum()
}
const cancelCompare = async (record) => {
  const { code, msg } = await post('/insure/saveXmlbInsure', {
    bh: record.bh,
    nmiCode: ''
  })
  if (code !== 0) return message.error(msg || '撤销失败')
  message.success(msg || '撤销成功')
  getData()
  getUnDataNum()
}
const autoCompare = async () => {
  const { code, msg } = await post('/insure/autoXmlbContro')
  if (code !== 0) return message.error(msg || '自动对照失败')
  message.success(msg || '自动对照成功')
  getData()
  getUnDataNum()
}
const handleReset = () => {
  formRef.value.resetFields()
  getData()
}
onMounted(() => {
  getUnDataNum()
})
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}

.table-row-select {
  background-color: red !important;
}
</style>
